'use client'
import { useRef, HTMLAttributes } from 'react';
import ReactMarkdown from 'react-markdown';
import RehypeKatex from 'rehype-katex';
import RemarkBreaks from 'remark-breaks';
import RemarkGfm from 'remark-gfm';
import RemarkMath from 'remark-math';
import rehypeRaw from 'rehype-raw';
import { copyToClipboard } from '@/app/hook/copyToClipboard';
import { Button, message, Image } from 'antd';
import React from 'react';

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';

import { prism } from 'react-syntax-highlighter/dist/esm/styles/prism';
import '@/app/assets/style/github-markdown-dark-gpt.css'
import '@/app/assets/style/github-markdown-light.css'

export default React.memo(function Markdown(props: { content: string }) {

    const preprocessContent = (content: any) => {
        if (content) {
            return content.replace(/!\(([^)]+)\)/g, '![]($1)');
        }
        return content
    };
    return (
        <div className='gptmarkdown with-scrollbar'>
            <ReactMarkdown
                className="markdown-body"
                children={props.content}
                // children={preprocessContent(props.content)}
                remarkPlugins={[RemarkMath, RemarkGfm, RemarkBreaks]}
                rehypePlugins={[rehypeRaw, RehypeKatex]}
                // components={{ pre: PreCode }}
                components={{
                    code({ inline, className, children, ...props }) {
                        const match = /language-(\w+)/.exec(className || '');
                        return !inline && match ? (
                            <>
                                <span className="language">{match[1]}</span>
                                <SyntaxHighlighter
                                    children={String(children).replace(/\n$/, '')}
                                    style={prism}
                                    language={match[1]}
                                    PreTag="div"
                                    showLineNumbers={true}
                                    wrapLongLines={true}
                                    {...props}
                                />
                            </>
                        ) : (
                            <code className={className} {...props} children={children} />
                        );
                    },
                    img: ({ src, alt, title }) => {
                        // 处理本地图片路径
                        const imageSrc = src.startsWith('http')
                            ? src
                            : src.startsWith('/')
                                ? src
                                : `/${src}`;

                        return <div style={{
                            margin: '0px 10px',
                            display: 'inline-block'
                        }}>
                            <Image
                                width={150}
                                height={150}
                                style={{
                                    objectFit: 'cover',
                                    objectPosition: 'center',
                                    borderRadius: '10px',
                                }}
                                src={imageSrc}
                                alt={alt || '图片'}
                            />
                        </div>
                    },
                    inlineCode({ value }: { value: unknown }) {
                        return (
                            <SyntaxHighlighter
                                style={prism}
                                language="plaintext"
                                children={value as any}
                                customStyle={{ display: 'inline', padding: '0.2em' }}
                            />
                        );
                    },
                }}
            ></ReactMarkdown>
        </div>
    );
})